<template>
  <div class="sort">
    <div class="btn">
      <el-button @click="openAll" type="primary" size="mini">{{text}}</el-button>
    </div>
    <el-collapse ref="sortDom" v-model="activeNames" @change="sortChange">
      <el-collapse-item v-show="dict_package[key]" class="title" v-for="(key,index) in packageIdArr" :key="index" :title="dict_package[key]" :name="key" :packageId="key">
        <el-checkbox-group class="sort-item"  v-model="checkbox" size="mini">
          <el-checkbox class="checkbox" v-show="dict_meta[item]" v-for="item,index2 in metaData[key]" :key="index2" :label="key+'-'+item" border>{{dict_meta[item]}}</el-checkbox>
        </el-checkbox-group>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    props: ['metaData','dict_package','dict_meta','usageId','templateId'],
    data() {
      return {
        activeNames: [],
        checkbox: [],
        itemSort: true,
        sortend: false,
        packageIdArr: [],
      }
    },
    watch: {
      metaData(val) {
        this.packageIdArr = []
        this.checkbox = []
        let localPackage = []
        let localmeta = {}
        if(this.usageId){
          let usageId = this.usageId
          let templateId = this.templateId
          let packagekey = usageId+'-'+templateId+'package'
          let metakey = usageId+'-'+templateId+'meta'
          localPackage = JSON.parse(window.localStorage.getItem(packagekey))
          localmeta = JSON.parse(window.localStorage.getItem(metakey))
        }
        let index = 0
        let packageId = Object.keys(val)
        let localPackageMeta = window.localStorage.getItem(JSON.stringify(packageId))
        if(localPackageMeta) {
          localPackageMeta = JSON.parse(localPackageMeta)
        }else{
          if(this.usageId){
            if(localmeta&&Object.keys(localmeta).length!=0){
              localPackageMeta = localmeta
            }else{
              localPackageMeta = val
            }
          }else{
            localPackageMeta = val
          }
        }
        for(let key in localPackageMeta){
          if(key){
            let id = ''
            if(key.split('_')[1]){
              id = key.split('_')[1]
            }else{
              id = key
            }
            this.packageIdArr.push(id)
            if(localPackageMeta[key]){
              localPackageMeta[key].forEach(item=>{
                this.checkbox.push(id+'-'+item)
              })
            }
            if(this['sortItem'+index]){
              this['sortItem'+index].destroy()
            }
            index ++
          }
        }
        if(localPackage && localPackage.length!=0){
          this.packageIdArr = localPackage
        }
        this.$forceUpdate()
        this.sortItem()
      },
    },
    computed: {
      text() {
        if(this.activeNames.length!=0){
          if(this.itemSort){
            // this.sortItem()
            this.itemSort = false
          }
          return '收起所有'
        }else{
          return '展开所有'
        }
      }
    },
    created() {
      this.$set(this.metaData)
      this.sort()
    },
    methods: {
      sortChange() {
        this.sortend = true
      },
      getNewMetaArr(meta) {
        let metaElArr = document.querySelectorAll("input[type='checkbox']:checked")
        let packageDom = document.querySelectorAll(".el-collapse .title")
        let packageArr = []
        packageDom.forEach(item=>{
          packageArr.push(item.getAttribute('packageId'))
        })
        packageArr = Array.from(new Set(packageArr))
        let metaIdArr = []
        let packageMeta = {}
        metaElArr.forEach(item=>{
          let package_meta = item.value.split('-')
          metaIdArr.push(package_meta[1])
          let key = 'packageId_'+package_meta[0]
          if(packageMeta[key]){
            packageMeta[key].push(package_meta[1])
          }else{
            packageMeta[key] = []
            packageMeta[key].push(package_meta[1])
          }
        })
        if(meta){
          return metaIdArr
        }else{
          return {packageMeta,sortend:this.sortend,packageArr}
        }
      },
      openAll() {
        if(this.activeNames.length!=0){
          this.activeNames = []
        }else{
          this.activeNames = Object.keys(this.metaData)
        }
      },
      sort() {
        this.$nextTick(() => {
          let sortDom = this.$refs.sortDom.$el
          this.sortable1 = this.$sortable.create(sortDom,{
            handle: '.el-collapse-item__header',
            disabled: false,
            forceFallback: true,
            animation: 150,
            dragClass: "sortable-drag",
            onEnd: ({ item, newIndex, oldIndex }) => {
              this.sortend = true
            }
          })
        })
      },
      sortItem() {
        this.$nextTick(() => {
          let sortItemArr = document.querySelectorAll('.sort-item')
          sortItemArr.forEach((item,index)=>{
            this['sortItem'+index] = this.$sortable.create(item,{
              handle: '.checkbox',
              disabled: false,
              forceFallback: true,
              animation: 150,
              onEnd: ({ item, newIndex, oldIndex }) => {
                this.sortend = true
              }
            })
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .sort{
    width: 90%;
    .btn{
      width: 100%;
      margin-bottom: 10px;
    }
    .title{
      &:hover{
        background-color: #000000;
      }
    }
    .sort-item{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .checkbox{
        margin: 5px;
      }
    }
    .sortable-drag{
      background-color: #c4e6de;
    }
  }
</style>
